<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<body>
<div id="app">
    <h1 id="msg1">{{message}}</h1>
    <h1 id="msg2">{{message2}}</h1>
    <h1 id="msg3">{{message3}}</h1>
    用户名:<input />
    <input type="button" value="修改message1" v-on:click="show1">
    <input type="button" value="修改message2" @click="show1" >
    <input  value="键盘按下" @keydown="show2" style="color: green">
    <input  value="鼠标悬浮" @mouseover="show3" style="color: red">
</div>


<script src="js/vue.js"></script>
<script>
    var msg="hello world";
    var vue=new Vue({
       el:"#app",
       data:{
           message:msg,
           message2:"how are you",
           message3:"happy new year"
       },
        methods:{
           show1(){
             this.message="你好啊 世界";
           },
            show2(){
               console.log("键盘被按下");
               var code=event.keyCode;
               console.log("按下按键ascii码:"+code);
               if (code==13){
                   console.log("enter键按下>>>>执行搜索");
               }
            },
            show3(){
               console.log("鼠标移到我身上了....");

            }

        }

    });

</script>

</body>
</html>